<template>
	<view>
		<Navbar :backUrl="backUrl"></Navbar>
		<view class="u-m-30">
			<u-search v-model="keyword" :height="80" :clearabled="false" bg-color="#fff" :show-action="true" :placeholder="`搜索青创私董/地址等`" @search="search" @custom="search"></u-search>
		</view>
		<view class="u-flex u-row-between drop_box">
			<u-dropdown height="96" menu-icon="arrow-down-fill" menu-icon-size="16" :active-color="'#B3723E'"
				:isBtn="isDropBtnActive" id="drop" ref="uDropdown" @menuBtnClick="menuBtnClick"
				@iconClick="iconClick">
				<u-dropdown-item :title="moreSelectList[dropIndex].checkName" v-for="(dropItem,dropIndex) in 4"
					:key="dropIndex">
					<view class="slot-content">
						<view class="rate_box">
							<view class="rate_title">{{moreSelectList[dropIndex].title}}</view>
							<view class="u-m-t-20">
								<u-row gutter="20">
									<u-col span="4" v-for="item in moreSelectList[dropIndex].list" :key="item.label">
										<view class="checkOptionBox u-m-b-20" :class="item.check ? 'checkStatus' : ''"
											@click="toRadioCheckData(item,moreSelectList[dropIndex])">
											{{item.label}}
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="筛选">
					<view class="slot-content">
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<scroll-view scroll-y="true">
			<view class="u-m-20">
				<TeaList :list="teaList" :isDistance="true" @goTeaDetail="goTeaDetail"></TeaList>
			</view>
		</scroll-view>
		<Loadmore :status="loadStatus"></Loadmore>
		<view style="height: 200rpx;"></view>
		<!-- <Bottom :isReturn="true"></Bottom> -->
		<view class="bottom_box">
			<view class="u-width-100">
				<view class="return_btn common_css" @click="toBack">返回</view>
			</view>
		</view>
		
		<!-- 多选弹出框 -->
		<u-popup v-model="selectPopupShow" length="90%" mode="bottom" border-radius="20">
			<view style="height: 100%;">
				<scroll-view scroll-y="true" class="slot-scroll" style="height: 85%;">
					<view v-for="selectItem in moreSelectList" :key="selectItem.title" class="borderLine moreOptionBox">
						<view class="moreOptionTitle">{{selectItem.title}}</view>
						<view class="u-m-t-20">
							<u-row gutter="20">
								<u-col span="4" v-for="childItem in selectItem.list" :key="childItem.label">
									<view class="checkOptionBox u-m-b-20" :class="childItem.check ? 'checkStatus' : ''"
										@click="toCheckData(childItem,selectItem)">
										{{childItem.label}}
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</scroll-view>
				<view style="height: 80rpx;"></view>
		
				<view class="u-flex u-m-l-32 u-p-b-40 u-m-r-32 u-row-between">
					<button class="reserve" @click="toReserve">重置</button>
					<button class="confirm" @click="toConfirm">确定</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 时间选择 -->
		<u-calendar v-model="calendar.show" :mode="calendar.mode" :min-date="startDate" :max-date="endDate" active-bg-color="#fb6316" range-bg-color="#F615" range-color="#fff" btn-type="warning" :z-index="99999"
			@change="calendarChange"></u-calendar>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import TeaList from '@/components/TeaList.vue'
	import { teaSelectList, presidentClass, formatDistance, getDayOfWeek, dateRange, formatDate  } from '@/utils/index.js'
	import { teaList } from '@/network/tea.js'
	import reachBottom from '@/mixins/reachBottom.js'
	export default{
		mixins: [reachBottom],
		components:{
			Navbar,
			Bottom,
			Loadmore,
			TeaList
		},
		data(){
			return{
				keyword: '',
				label: '',
				teaList: [],
				moreSelectList: teaSelectList(),
				isDropBtnActive: false,
				selectPopupShow: false,
				loadStatus: 'loadmore',
				longitude: 0,
				latitude: 0,
				calendar: {
					show: false,
					mode: 'date'
				},
				startDate: formatDate(Date.now() / 1000, true),
				endDate: formatDate((Date.now() + 2400 * 1000 * 24 * 9) / 1000, true),
				status: uni.getStorageSync("user_status"), // 0 未注册  1 拉黑  2 已注册  3未激活
				presidentStatus: uni.getStorageSync("president_status") // 0 不是青创私董 1 青创私董审核 2 审核不通过 3 考核中 4 考核不通过 5 爱心青创私董 6 初级青创私董 7 高级青创私董 8 超级青创私董 
			}
		},
		onLoad(options){
			this.keyword = options.keyword || ''
			this.label = options.label || ''
			uni.showLoading({
				title: '加载中'
			})
			
			const params = {
				checkName: '全部时间',
				checkValue: 0,
				list:[{check: true,label: "全部时间",value: 0},{check: false,label: "今天",value: 1},{check: false,label: "明天",value: 2},{check: false,label: "后天",value: 3},{check: false,label: "自定义",value: 4}],
				title: '时间'
			}
			this.moreSelectList[0] = params
			const _this = this
			uni.getLocation({
				success: function(res) {
					_this.longitude = res.longitude
					_this.latitude = res.latitude
					_this.getTeaList()
				}
			})
		},
		methods:{
			getTeaList() {
				const params = this.dealSelectData()
				teaList(params).then(res => {
					if (res.data.list.length > 0) {
						res.data.list.map(item => {
							switch (item.pay_type) {
								case 1:
									item.pay_name = '免费'
									break;
								case 2:
									item.pay_name = `${parseInt(item.price)}元`
									break;
								case 3:
									item.pay_name = `${parseInt(item.price)}积分`
									break;
							}
							if(item.label){
								item.label = item.label.split("#").filter(item=>item !== null && item !== undefined && item)
							}
							item.user.president_class = presidentClass(item.user.president_status)
							item.distance = formatDistance(item.distance)
							let newTime = item.starting_time.slice(0,0) + item.starting_time.slice(11)
							item.starting_time = getDayOfWeek(item.starting_time.slice(0,10)) + newTime
							this.teaList.push(item)
						})
					}
					if (res.data.list.length < 10) this.loadStatus = 'nomore'
					uni.hideLoading()
				})
			},
			toRadioCheckData(item, data) {
				/* 下拉单选 */
				let _this = this
				if (data.title == "距离" && item.label == "地区选择" && item.value == 0) {
					uni.chooseLocation({
						success: function(res) {
							data.checkName = item.label
							data.latitude = res.latitude
							data.longitude = res.longitude
							_this.reserveList()
						}
					})
				}
				if (data.title == '时间' && item.value == 4) {
					this.calendar.show = true
					data.list.map(item => item.check = false)
					item.check = true
					data.checkName = item.label
					data.checkValue = item.value
					return
				}
				data.list.map(item => item.check = false)
				item.check = true
				data.checkName = item.label
				data.checkValue = item.value
				this.reserveList()
				this.$refs.uDropdown.close()
			},
			toCheckData(item, data) {
				/* 下拉筛选单选 */
				if (data.title == '时间' && item.value == 4) {
					this.calendar.show = true
				}
				if (data.title == '距离' && item.label == "地区选择" && item.value == 0) {
					uni.chooseLocation({
						success: function(res) {
							data.checkName = item.label
							data.latitude = res.latitude
							data.longitude = res.longitude
						}
					})
				}
				data.list.map(item => item.check = false)
				item.check = true
				data.checkName = item.label
				data.checkValue = item.value
			},
			dealSelectData() {
				/* 处理数据 */
				let params = {
					page: this.page,
					limit: this.pageSize,
					keyword: this.keyword,
					label: this.label,
					user_id: uni.getStorageSync("user_id")
				}
				let _this = this
				this.moreSelectList.map(item => {
					switch (item.title) {
						case "时间":
						    if(item.checkValue == 0){
								params.start_time = ''
							}else if(item.checkValue == 4){
								params.start_time = `${item.startDate} 00:00:00至${item.endDate} 23:59:59`
							} else{
								params.start_time = `${dateRange(item.checkValue - 1,1).start_time}至${dateRange(item.checkValue - 1,1).end_time}`
							}
							break;
						case "距离":
							if (item.checkName == "地区选择" && item.checkValue == 0) {
								params.distance = ''
								params.longitude = item.longitude
								params.latitude = item.latitude
							} else {
								params.distance = item.checkValue
								params.longitude = _this.longitude,
									params.latitude = _this.latitude
							}
							break;
						case "主题":
							params.theme_id = item.checkValue || ''
							break;
						case "青创私董等级":
							params.president_status = item.checkValue || ''
							if (item.checkValue !== "8") {
								this.isDropBtnActive = false
							}
							break;
						case "类型":
							params.pay_type = item.checkValue || ''
							break;
						case "酒局状态":
							params.tea_status = item.checkValue || ''
							break;
					}
				})
				return params
			},
			iconClick() {
				this.selectPopupShow = true
			},
			toReserve() {
				/* 筛选充值 */
				this.moreSelectList.map(item => {
					if (["时间", "距离", "主题", "青创私董等级"].includes(item.title)) {
						item.checkName = item.list[0].label
						item.checkValue = item.list[0].value
						item.list.map(listItem => listItem.check = false)
						item.list[0].check = true
					} else {
						item.checkName = ''
						item.checkValue = ''
						item.list.map(otherItem => otherItem.check = false)
						item.list[0].check = true
					}
				})
				this.reserveList()
				// this.$refs.uDropdown.close()
				this.selectPopupShow = false
				this.$refs.uDropdown.contentHeight = 0
			},
			toConfirm() {
				/* 筛选确认 */
				this.reserveList()
				// this.$refs.uDropdown.close()
				this.$refs.uDropdown.contentHeight = 0
				this.selectPopupShow = false
			},
			reserveList() {
				this.page = 1
				this.teaList.length = 0
				this.loadStatus = 'loading'
				this.getTeaList()
			},
			search(val) {
				this.keyword = val
				this.toReserve()
			},
			calendarChange(val) {
				this.moreSelectList.map(item => {
					if (item.title == '时间') {
						item.startDate = val.result
						item.endDate = val.result
					}
				})
				this.reserveList()
				this.$refs.uDropdown.close()
			},
			loadData() {
				if (this.loadStatus == 'nomore') return
				this.page++
				this.loadStatus = 'loading'
				this.getTeaList()
			},
			goTeaDetail(val){
				uni.navigateTo({
					url: `/teaBureau/teaDetail/teaDetail?id=${val.id}`
				})
			},
			toBack(){
				getApp().globalData.switchCustom = true
				uni.switchTab({
					url:"/pages/home/home"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-dropdown__menu {
		background: #fff;
		padding: 16rpx;
		justify-content: space-between;
		border-radius: 20rpx;
	}
	
	::v-deep .u-dropdown__menu__item {
		background: #F3F4F6;
		border-radius: 14rpx;
		padding: 0 12rpx;
		flex: none !important;
	}
	
	::v-deep .u-dropdown__menu__item__text {
		font-size: 24rpx !important;
		// color: #9EA2AE !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	::v-deep .u-action{
		margin-left: 20rpx !important;
		font-size: 30rpx !important;
		color: #343c6a !important;
	}
	
	.rate_box {
		padding: 30rpx 30rpx 20rpx 30rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	
		.rate_title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	
	.moreOptionBox {
		padding: 20rpx 0px;
		margin: 0 20rpx;
	
		.moreOptionTitle {
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 10rpx;
		}
	}
	
	.checkOptionBox {
		background: #F7F7F7;
		color: #000;
		padding: 20rpx 0;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
	}
	
	.checkStatus {
		background: #fb6316;
		color: #fff;
	}
	
	.slot-content {
		background: #fff;
		height: 100%;
		border-bottom: 1px solid #f7f7f7;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	
		.slot-scroll {
			height: 800rpx;
			box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
		}
	}
	
	.reserve {
		width: 240rpx;
		margin-right: 40rpx;
		background: #eee;
		color: #000;
		font-size: 24rpx;
		padding: 8rpx 0;
	}
	
	button::after {
		border: none;
	}
	
	.confirm {
		flex: 1;
		background: #fb6316;
		color: #fff;
		font-size: 24rpx;
		padding: 8rpx 0;
	}
	
	.common_css{
		color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.return_btn{
		height: 80rpx;
		background: #31396A;
		border-radius: 20rpx;
	}
</style>